<template>
	<view class="titleWrap">
		<!-- #ifdef APP-PLUS -->
		<text class="xLine title" :style="{color: color, lines: lines, fontSize: titleSize, lineHeight: lineHeight}">{{realText}}</text>
		<text :class="labelClass" :style="{fontSize: labelSize}" v-if="label">{{label}}</text>
		<!-- #endif -->
		
		<!-- #ifdef H5 || MP-WEIXIN -->
		<text class="xLine title" :style="{color: color, '-webkit-line-clamp': lines, fontSize: titleSize, lineHeight: lineHeight}">
			<text :class="labelClass" :style="{fontSize: labelSize}" v-if="label">{{label}}</text>
			{{text}}
		</text>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#000000'
			},
			gradient: {
				type: Boolean,
				default: false
			},
			lines: {
				type: Number,
				default: 0
			},
			labelSize: {
				type: String,
				default: '24rpx'
			},
			titleSize: {
				type: String,
				default: '24rpx'
			},
			lineHeight: {
				type: String,
				default: '32rpx'
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			realText() {
				if (this.label) {
					return `  ${this.label}  ${this.text}`
				} else {
					return this.text
				}
			},
			titleClass() {
				// if ()
				return ''
			},
			labelClass() {
				if (this.gradient) {
					return 'label labelBi'
				} else {
					return 'label labelBc'
				}
			}
		}
	}
</script>

<style scoped>
	.titleWrap {
		position: relative;
		/* height: 64rpx; */
	}
	.title {
		/* line-height: 32rpx; */
		/* font-size: 24rpx; */
		color: #3d3e43;
	}
	.label {
		/* #ifdef H5 || MP-WEIXIN */
		margin-left: 10rpx; 
		margin-right: 10rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		position: absolute;
		top: 0;
		left: 7rpx;
		/* #endif */
		/* font-size: 24rpx; */
		/* background-color: #f6441c; */
		color: #FFFFFF;
		padding-top: 5rpx; 
		padding-bottom: 1rpx; 
		padding-left: 5rpx; 
		padding-right: 5rpx;
		border-radius: 5rpx;
	}
	.labelBc {
		background-color: #f6441c;
	}
	.labelBi {
		background-image: linear-gradient(to bottom right,#fed1e9,#a2a7fc);
	}
	
	.xLine {
		/* #ifdef H5 || MP-WEIXIN */
		white-space: normal;
		word-break: break-word;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* #endif */
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
